<template>
  <div>
    <a-card :bordered="false" class="">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48" @keyup.enter.native="searchList">
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="版型号">
                <span v-if="modelNumber">{{ modelNumber }}</span>
                <a-select
                  show-search
                  label-in-value
                  allowClear
                  v-model="queryParam.modelNumber"
                  placeholder="请输入搜索"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="fetching ? undefined : null"
                  @search="getQuery"
                  @change="handleChange"
                  @focus="handleFoucs"
                  :getPopupContainer="triggerNode => triggerNode.parentNode"
                  v-else
                >
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option v-for="d in modelNumberList" :key="d">
                    {{ d }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="提交状态">
                <a-select v-model="queryParam.timeQuantum" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="item.code" v-for="item in filterList" :key="item.code">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="12" :lg="8" :md="24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="sales-sum">
        <h2>总计销量：</h2>
        <span>{{ sumSalesNumber }}</span>
        <h2>总计销售金额：</h2>
        <span>¥ {{ sumSalesPrice }}</span>
      </div>
      <s-table ref="table" size="default" :rowKey="record => JSON.stringify(record)" :columns="columns" :data="loadData" :pagination="paginationProps">
        <span slot="pic" slot-scope="text">
          <a-tooltip placement="rightTop" :getPopupContainer="triggerNode => triggerNode.parentNode">
            <template slot="title">
              <img :src="text" alt="" class="goods-img-big" />
            </template>
            <img :src="text" alt="" class="goods-img" />
          </a-tooltip>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="openDetail(record)">查看商详</a>
        </span>
      </s-table>
    </a-card>
    <GoodInfoModal ref="goodInfoModal"></GoodInfoModal>
  </div>
</template>
<script>
import { listMixin } from '@/views/box/util/listMixin'
import { versionLibQuerySales, versionLibQuerySalesQueries } from '@/api/goods/index'
import GoodInfoModal from '@views/box/components/GoodInfoModal'
import debounce from 'lodash/debounce'
const columns = [
  { title: '图片', align: 'center', dataIndex: 'pic', scopedSlots: { customRender: 'pic' } },
  { title: '品名', dataIndex: 'categoryName', align: 'center' },
  { title: '款号', dataIndex: 'spu', align: 'center' },
  { title: '价格', dataIndex: 'price', align: 'center' },
  { title: '销量', dataIndex: 'salesNumber', align: 'center' },
  { title: '销售金额', dataIndex: 'salesPrice', align: 'center' },
  { title: '操作', align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  mixins: [listMixin],
  components: { GoodInfoModal },
  data() {
    this.getQuery = debounce(this.getQuery, 800)
    return {
      columns,
      queryParam: {
        modelNumber: undefined,
        timeQuantum: ''
      },
      filterList: [],
      sumSalesNumber: '',
      sumSalesPrice: '',
      modelNumber: this.$route.params.modelNumber,
      fetching: false,
      modelNumberList: [],
      ogModelNumberList: [],
      loadData: parameter => this.fetchData(parameter)
    }
  },
  computed: {},
  created() {
    this.getQuery()
  },
  methods: {
    getQuery(value) {
      let params = {
        requestData: {
          modelNumber: value
        }
      }
      versionLibQuerySalesQueries(params).then(res => {
        if (res.code == 0) {
          this.filterList = res.data.filterList
          this.modelNumberList = res.data.modelNumberList
          if (this.ogModelNumberList.length == 0) this.ogModelNumberList = JSON.parse(JSON.stringify(res.data.modelNumberList))
          this.queryParam.timeQuantum = 'M4'
        }
      })
    },
    fetchData(parameter) {
      let formValue = {}
      if (this.modelNumber) {
        this.queryParam.modelNumber = this.modelNumber
        formValue = JSON.parse(JSON.stringify(this.queryParam))
      } else {
        formValue = this.filterFields(this.queryParam)
      }

      try {
        let params = {
          page: parameter,
          requestData: formValue
        }
        return this.fetchList(params, versionLibQuerySales).then(res => {
          if (res.code == 0) {
            this.sumSalesNumber = res.data.sumSalesNumber
            this.sumSalesPrice = res.data.sumSalesPrice
            return {
              data: res.data.salesEntities,
              page: res.page
            }
          } else {
            this.$message.warning(res.msg)
            return {
              data: [],
              page: {
                pageNo: 1,
                pageSize: 10,
                count: 0
              }
            }
          }
        })
      } catch (err) {
        console.log(err)
      }
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] !== '' && values[i] !== undefined && values[i] !== null) {
          if (i == 'modelNumber') {
            formValue.modelNumber = values[i].key
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    },
    resetList() {
      if (this.modelNumber) {
        this.queryParam = {
          modelNumber: this.modelNumber,
          timeQuantum: ''
        }
      } else {
        this.queryParam = {
          modelNumber: undefined,
          timeQuantum: ''
        }
      }

      this.$refs.table.refresh(true)
    },
    openDetail(record) {
      this.$refs.goodInfoModal.show(record.productId)
    },
    handleChange(value) {
      // console.log(value)
      this.queryParam.modelNumber = value
      this.modelNumberList = []
      this.fetching = false
      if (value == undefined || value == '' || value == null) {
        this.modelNumberList = this.ogModelNumberList
      }
    },
    handleFoucs() {
      this.queryParam.modelNumber = undefined
      this.modelNumberList = this.ogModelNumberList
      this.fetching = false
    }
  }
}
</script>

<style lang="less" scoped>
.sales-sum {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  span {
    margin-right: 16px;
    font-size: 16px;
    color: brown;
  }
  h2 {
    margin-bottom: 0;
  }
}
.goods-img {
  height: 100px;
  object-fit: scale-down;
}
.goods-img-big {
  height: 300px;
  object-fit: scale-down;
}
/deep/.ant-tooltip-inner {
  min-width: 316px;
}
</style>

